<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <!-- 导入表格需要的包 -->

    <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script src="https://cdn.staticfile.org/xlsx/0.14.1/xlsx.full.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>

  <body>
    <div id="app">
      <el-button type="primary" @click="rowAdd">新增</el-button>
      <avue-crud
        :defaults.sync="defaults"
        :data="data"
        :option="option"
        ref="crud"
        v-model="form"
        @row-save="rowSave"
      >
        <!-- <template slot="dialogForm">
         <div>自定义插槽</div>
     </template> -->
        <template slot="dialogForm">
          <avue-form v-model="obj1" :option="option1"  ref="tableForm"  @submit="rowSave"></avue-form>
        </template>
      </avue-crud>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            defaults: {},
            data: [{ text1: 0 }],
            form: {},
            obj1: {},
            option1: {
              menuSpan: 6,
              column: [
                {
                  label: "用户名",
                  prop: "username",
                  rules: [
                    {
                      required: true,
                      message: "请输入用户名",
                      trigger: "blur"
                    }
                  ]
                }
              ]
            },
            option: {
              formInDialog: false,
              isShowSearchComponent: false,
              isShowDialogFormComponent: true,
              isShowTableComponent: false,
              column: [
                {
                  label: "内容1",
                  prop: "text1",
                  type: "radio",
                  search: true,
                  dicData: [
                    {
                      label: "显示",
                      value: 0
                    },
                    {
                      label: "隐藏",
                      value: 1
                    }
                  ]
                },
                {
                  label: "内容2",
                  prop: "text2",
                  display: true
                },
                {
                  label: "内容3",
                  prop: "text3"
                }
              ]
            }
          };
        },
        methods: {
          rowAdd() {
            this.$refs.crud.rowAdd();
          },
          rowSave(form, done, loading) {
            console.log("form: ", form);
            console.log("我点击了保存");
            done();
          }
        },
        mounted() {
            console.log(this)
          setTimeout(() => {
            console.log("this.defaults: ", this.defaults);
          }, 0);
        },
        watch: {
          "form.text1"(val) {
            //   if (val == 0) {
            //     this.defaults.text2.display = true;
            //     this.defaults.text3.label = "内容3";
            //   } else {
            //     this.defaults.text2.display = false;
            //     this.defaults.text3.label = "有没有发现我变了";
            //   }
          }
        }
      });
    </script>
  </body>
</html>
